<template>
  <div class="game">
    <div class="content">
      <!-- 头部游戏卡片 -->
      <div class="game_card">
        <div class="game_card_head">
          <img src="/img/_game/share.webp">
          <span class="title">PG电子-麻将胡了2</span>
        </div>
        <div class="game_card_body">
          <img :src="img" class="bg_img" />
          <div class="card_body_content">
            <img class="avatar" :src="img" />
            <div class="btn">
              进入游戏
            </div>
          </div>
        </div>
        <div class="game_card_foot">
          <view class="start">
            <img src="/img/_game/like.webp">
            <img src="/img/_game/start.webp">
            <img src="/img/_game/share2.webp">
          </view>

          <img src="/img/_game/full.webp">
        </div>
      </div>


      <!-- 游戏详情 -->
      <div class="game_detail">
        <div class="head">
          <span class="title">
            {{ gameName }}
            <span class="sub_title">游戏货币：VND</span>
          </span>
          <div class="tags">
            <span class="tag">PG Soft</span>
            <span class="tag">Orginals</span>
            <span class="tag">推荐</span>
            <span class="tag">原创</span>
          </div>
        </div>
        <!-- 信息栏 -->
        <div class="information">
          <div class="column">
            <span>
              庄家优势：
              <span style="--color:#63DDFF;">3.49%</span>
            </span>
            <span>
              最大盈利：
              <span>--</span>
            </span>
          </div>
          <div class="column">
            <span>RTP（返奖率）：
              <span style="--color:#FF812E;">96.51%</span>
            </span>
            <span>波动性：
              <span style="--color:#DB1F1F;">高</span>
            </span>
          </div>
          <div class="column">
            <span>转轴设计： 5X3</span>
            <span>投注范围 ：
              <span>--</span>
            </span>
          </div>
        </div>

        <!-- tabs -->
        <div class="tabs">
          <div v-for="(item, index) of  tabsList" :key="index" @click="tabsValue = index" class="tab" :class="{
            active: tabsValue === index
          }">
            {{ item }}
          </div>
        </div>

        <!-- 排行 -->
        <div class="ranking" v-if="tabsValue == 0">
          <div v-for="(_item, index) of new Array(3)" :key="index" class="ranking_item">
            <div class="head" :style="{
              background: ['linear-gradient(90deg, #DCBA60 0%, #C59829 100%)', 'linear-gradient(90deg, #75BAF2 0%, #4D7FF0 100%)', 'linear-gradient(90deg, #C97928 0%, #BC641D 100%)'][index]
            }">
              <img class="avatar" src="/img/_game/ranking-avatar.webp" />
              <span class="name">Fran***1</span>
              <span>
                PKbet-SLOT
              </span>
              <img class="ranking_icon" :src="`/img/_game/ranking-${index}.webp`" />
            </div>
            <div class="body">
              <div class="information">
                <div class="line">
                  <span>奖金</span>
                  <span style="--color:#F49A24;">+50.900.000</span>
                </div>

                <div class="line">
                  <span>投注金额</span>
                  <span>500000</span>
                </div>
                <div class="line">
                  <span>赔率</span>
                  <span>0.0000X</span>
                </div>

              </div>
            </div>

          </div>
        </div>

        <!-- 评分 -->
        <div v-if="tabsValue == 2">
          <div class="rate">
            <div class="rate_head">
              <span class="score">4.0</span>
              <div class="rate_head_end">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 24px;height: 24px;"
                      :src="`/img/_game/${index < 3 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
              </div>
            </div>
            <div class="rate_body">
              <div class="line">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 20px;height: 20px;"
                      :src="`/img/_game/${index < 0 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
                <n-progress type="line" :percentage="30" :show-indicator="false" :height="10"
                  color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" border-radius="6px" rail-color="#2B2865" />
              </div>

              <div class="line">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 20px;height: 20px;"
                      :src="`/img/_game/${index < 0 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
                <n-progress type="line" :percentage="30" :show-indicator="false" :height="10"
                  color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" border-radius="6px" rail-color="#2B2865" />
              </div>

              <div class="line">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 20px;height: 20px;"
                      :src="`/img/_game/${index < 0 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
                <n-progress type="line" :percentage="30" :show-indicator="false" :height="10"
                  color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" border-radius="6px" rail-color="#2B2865" />
              </div>

              <div class="line">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 20px;height: 20px;"
                      :src="`/img/_game/${index < 0 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
                <n-progress type="line" :percentage="30" :show-indicator="false" :height="10"
                  color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" border-radius="6px" rail-color="#2B2865" />
              </div>

              <div class="line">
                <n-rate readonly :default-value="5">
                  <template v-slot:default="{ index }">
                    <img style="width: 20px;height: 20px;"
                      :src="`/img/_game/${index < 0 ? 'active_' : ''}start_icon.webp`" />
                  </template>
                </n-rate>
                <n-progress type="line" :percentage="30" :show-indicator="false" :height="10"
                  color="linear-gradient(180deg, #5A6CFF 0%, #7E1CFF 100%)" border-radius="6px" rail-color="#2B2865" />
              </div>
            </div>
          </div>
          <div class="rate_bottom" style="margin-top: 10px;">
            <div class="rate">
              <span>评价这个游戏</span>
              <n-rate readonly :default-value="5">
                <template v-slot:default="{ index }">
                  <img style="width: 20px;height: 20px;"
                    :src="`/img/_game/${index < 4 ? 'active_' : ''}start_icon.webp`" />
                </template>
              </n-rate>
            </div>
            <div class="rate">
              <span>99+已评分</span>
              <div style="display: flex;gap:4px;">
                <n-avatar v-for="_e of 5" :size="20" src="/img/_game/ranking-avatar.webp" round />
              </div>
              <!-- <nut-avatar-group span="-4" :max-count="5" max-content="">
                <nut-avatar v-for="item of 5" :key="item" size="20" bg-color="transparent">
                  <img src="/img/_game/ranking-avatar.webp" />
                </nut-avatar>
              </nut-avatar-group> -->
            </div>
          </div>
        </div>



      </div>

      <div class="game_collect">
        <!-- <HomeOther></HomeOther> -->
        <gameCollect></gameCollect>
      </div>
      <div class="game_detail da_jiang">
        <div class="game_list">
          <div class="game_type">
            <div class="text">
              <span class="text_title">
                <Imgt class="title_img" :src="`/img/home/reward.webp`" />
                {{ t('home_page_grand') }}
              </span>
              <div class="tab_wrap">
                <div v-for="item in tabList" :key="item.id" @click="tabClick(item)"
                  :class="{ tab_active: tab_id == item.id }">
                  <iconpark-icon :icon-id="tab_id == item.id ? item.active_icon : item.icon"
                    size="1rem"></iconpark-icon>
                  <span>{{ t(item.label) }}</span>
                </div>
              </div>
            </div>
            <span class="more" @click="router.push('/recentAwards')">{{
              t('home_page_more')
            }}</span>
          </div>
          <n-carousel style="position: static" :slides-per-view="8" :space-between="10" :loop="false" draggable
            show-arrow>
            <div v-for="i in 10" :key="i" class="da_jiang_list">
              <Imgt class="reward_img" :src="`/img/home/dajiang.png`" />
              <span class="text1">恭喜发财</span>
              <span class="text2">hsj***263</span>
              <span class="text3">476.376.000 VDN</span>
            </div>

            <template #arrow="{ prev, next }">
              <div class="game_seach">
                <span>
                  <iconpark-icon class="left" icon-id="fangxiangicon04" size=".8rem" @click="prev"></iconpark-icon>
                  <iconpark-icon class="right" icon-id="fangxiangicon01" size=".8rem" @click="next"></iconpark-icon>
                </span>
              </div>
            </template>
          </n-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';


import { tabList } from '../newHome/demoData';
import gameCollect from '../newHome/components/gameCollect/index.vue'
import router from '@/router';
import { useI18n } from 'vue-i18n';
const tab_id = ref(1);
const { t } = useI18n();
const tabClick = (item: any) => {
  tab_id.value = item.id;
};
const tabsList = ['当日最高盈利', '每日单注最高盈利', '游戏评分']
const gameName = ref('糖果派对')
const tabsValue = ref(0)
const img = "http://18.167.187.79:8053/uploads/images/JDB.png";

</script>
<style lang="less" scoped>
@timestamp: `new Date() .getTime() `;

.game {
  // display: grid;
  // grid-template-rows: auto 1fr;

  .btn {
    height: 52px;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
    cursor: pointer;
    margin: 0;
    border-width: 0;
    width: 372px;
    box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    text-align: center;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;

  }

  .content {
    width: 100%;
    padding: 0px 10px 30px 10px;
    margin-top: 14px;
    display: flex;
    flex-direction: column;

    // 头部游戏卡片
    .game_card {
      border-radius: 12px;
      overflow: hidden;

      .game_card_head,
      .game_card_foot {
        background-color: #131232;
        padding: 15px 40px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        img {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }
      }

      .game_card_head {
        .title {
          padding-right: 30px;
          flex: 1;
          font-family: PingFang SC;
          font-size: 20px;
          font-weight: 400;
          line-height: 28px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: #D8ECFF;
          text-align: center;
        }
      }

      .game_card_body {
        position: relative;
        overflow: hidden;

        .bg_img {
          width: 100%;
          margin: auto;
          left: 0;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .card_body_content {
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
          padding: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 40px;
          height: 730px;

          >.avatar {
            width: 120px;
            height: 120px;
            border-radius: 12px;
            overflow: hidden;
          }

          .end {
            display: flex;
            flex-direction: column;
          }
        }
      }

      .game_card_foot {
        .start {
          display: flex;
          flex-direction: row;
          gap: 36px;
        }
      }
    }

    .game_detail {
      display: flex;
      flex-direction: column;
      margin-top: 40px;
      border-radius: 16px;
      overflow: hidden;
      padding: 40px 60px;
      background-color: #131232;
      gap: 30px;

      .head {
        display: flex;
        flex-direction: row;
        gap: 22px;
        align-items: center;

        .title {
          font-family: PingFang SC;
          font-size: 24px;
          font-weight: 600;
          line-height: 33.6px;
          text-align: left;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: #FFFFFF;

          .sub_title {
            font-family: PingFang SC;
            font-size: 20px;
            font-weight: 400;
            line-height: 28px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #AFB6BD;
            margin-left: 10px;
          }
        }

        .tags {
          flex: 1;
          display: flex;
          flex-direction: row;
          gap: 16px;
          justify-content: end;

          .tag {
            font-family: PingFang SC;
            font-size: 16px;
            font-weight: 600;
            line-height: 22.4px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

            border-radius: 8px;
            padding: 5px 16px;
            background-color: #9090FE;
            color: #FFFFFF;
          }
        }
      }

      // 信息展示
      .information {
        display: flex;
        flex-direction: row;
        gap: 10px;
        background-color: #1B1F4B;
        padding: 20px 0;
        border-radius: 8px;

        >.column {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          flex: 1;
          align-items: center;
          gap: 10px;

          span {
            font-family: PingFang SC;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

            color: var(--color, #FFFFFF);
          }
        }
      }

      .tabs {
        background-color: #0B0B23 !important;
        border-radius: 12px;
        height: 46px;
        display: flex;
        flex-direction: row;

        .tab {
          cursor: pointer;
          flex: 1;
          border-radius: 12px;
          text-align: center;
          line-height: 46px;

          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 600;
          text-align: center;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;



          &.active {
            background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
            box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;
            color: #FFFFFF;
            font-weight: 500;
          }

        }
      }

      // 排名
      .ranking {
        display: flex;
        flex-direction: row;
        gap: 40px;
        margin-top: 22px;

        .ranking_item {
          flex: 1;
          display: flex;
          flex-direction: column;
          border-radius: 8px;
          // overflow: hidden;

          .head {
            // padding: 7px 5px 7px 16px;
            display: flex;
            padding: 10px 10px 10px 20px;
            display: flex;
            flex-direction: row;
            position: relative;
            border-radius: 8px 8px 0 0;
            align-items: center;
            gap: 6px;

            .avatar {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }

            .name {
              font-family: Source Han Sans CN;
              font-size: 14px;
              font-weight: 400;
              line-height: 21px;
              text-align: center;
              text-underline-position: from-font;
              text-decoration-skip-ink: none;
              color: #FFFFFF;
              position: initial;
              text-align: left;
              opacity: 1;
              margin-top: 0;
            }

            span {
              position: absolute;
              flex: 1;
              text-align: right;
              font-family: Niagara Solid;
              font-size: 48px;
              font-weight: 400;
              line-height: 72px;
              text-underline-position: from-font;
              text-decoration-skip-ink: none;
              right: 5px;
              opacity: 20%;
              color: #FFFFFF;
              margin-top: 5px;
            }

            .ranking_icon {
              position: absolute;
              width: 80px;
              height: 79.03px;
              right: 14px;
            }

          }

          .body {
            z-index: 1;
            padding: 16px 20px;
            background-color: #1B1F4B;
            box-shadow: 0.5px 0.5px 1px 0px #333260 inset;



            border-radius: 0 0 8px 8px;


            // 信息展示
            .information {
              display: flex;
              flex-direction: column;
              gap: 10px;
              padding: 0;

              .line {
                display: flex;
                flex-direction: row;
                justify-content: space-between;

                span {
                  font-family: Source Han Sans CN;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 21px;
                  text-align: left;
                  text-underline-position: from-font;
                  text-decoration-skip-ink: none;
                  color: var(--color, #A8A8CA);
                }
              }
            }
          }
        }
      }

      //  评分
      .rate {
        border-radius: 18px;
        padding: 42px 60px;
        background: #1B1F4B;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 60px;

        .rate_head {
          display: flex;
          flex-direction: column;
          align-items: center;

          .score {
            font-family: PingFang SC;
            font-size: 90px;
            font-weight: 600;
            line-height: 126px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;

            color: #FFFFFF;
          }

          .rate_head_end {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: end;
            gap: 4px;

            span {
              font-family: PingFang SC;
              font-size: 10px;
              font-weight: 400;
              line-height: 14px;
              text-align: left;
              text-underline-position: from-font;
              text-decoration-skip-ink: none;

            }
          }
        }



        .rate_body {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 6px;

          .line {
            display: flex;
            flex-direction: row;
            gap: 20px;
            align-items: center;

            :deep(.nut-progress) {
              flex: 1;
            }
          }
        }
      }



      .rate_bottom {
        display: flex;
        flex-direction: row;
        padding: 20px 60px;
        background: #1B1F4B;
        border-radius: 16px;
        justify-content: space-between;

        .rate {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 20px;
          border-radius: 0;
          padding: 0;

          span {
            font-family: PingFang SC;
            font-size: 20px;
            font-weight: 600;
            line-height: 28px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;


            color: #FFFFFF;
          }
        }
      }



    }


    .game_collect {

      :deep(.game_detail) {
        background-color: transparent;
        padding: 0;
        position: relative;

        .colect_wrap_item {
          overflow: hidden;
        }

        .colect_wrap {
          gap: 12px;
          // padding: 20px 30px;
          border-radius: 8px;
          padding-bottom: 0;
        }

        .colect_wrap .colect_wrap_item_des img {
          width: 154px;
          // height: 154px;
          border-radius: 8px;
        }

        .colect_wrap .colect_wrap_item_des div {
          padding: 0 0 9px 0;
          border-radius: 8px;

          // margin-top: -5px;
          span {
            margin-top: -5px;
          }
        }

        .colect_wrap .colect_wrap_item_des {
          background-color: #1B1C2A;
        }


        .game_type {
          color: #fff;
          font-size: 22px;
          display: flex;
          justify-content: space-between;

          >.text {
            display: flex;

            >b {
              display: flex;
              justify-content: center;
              align-items: center;
              width: 36px;
              height: 36px;
              box-sizing: border-box;
              margin-right: 10px;
              border-radius: 12px;
              background-image: linear-gradient(to right, #f5519d 30%, #ff6ad5 100%);
            }

            .live {
              background-image: linear-gradient(to right, #f5519d 30%, #ff6ad5 100%);
            }

            .slot_machine {
              background-image: linear-gradient(to right, #ef5b35 21%, #ff784e 100%);
            }

            .gaming {
              background-image: linear-gradient(to right, #8931d5 21%, #c255e8 100%);
            }

            .fish {
              background-image: linear-gradient(to right, #2bc36d 21%, #33caa9 100%);
            }

            .sports {
              background-image: linear-gradient(to right, #1256ff 21%, #2879ff 100%);
            }
          }

          >.more {
            width: 90px;
            height: 40px;
            display: flex;
            font-size: 16px;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            border: solid 1.4px #282747;
            background-color: #282747;
            cursor: pointer;
            color: #c6c4f5;
            margin-right: 110px;

            &:hover {
              color: #fff;
              background: url('/img/dialog/click.webp?t=@{timestamp}') no-repeat;
              background-size: 100% 100%;
            }
          }
        }

        .colect_wrap {
          border-top-left-radius: 0;
        }

      }


    }

    .da_jiang {
      padding: 0;

      background-color: transparent;
      position: relative;

      .game_seach {
        top: 0px;
      }

      .more {
        width: 90px;
        height: 40px;
        display: flex;
        font-size: 16px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: solid 1.4px #282747;
        background-color: #282747;
        cursor: pointer;
        color: #c6c4f5;
        margin-right: 110px;

        &:hover {
          color: #fff;
          background: url('/img/dialog/click.webp?t=@{timestamp}') no-repeat;
          background-size: 100% 100%;
        }
      }

      .game_type {
        color: #fff;
        font-size: 1.14583rem;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
      }

      .text_title {
        display: flex;

        .title_img {
          width: 35px !important;
          height: 35px !important;
          margin-right: 3px;
        }
      }

      .game_type .text {
        display: flex;
        align-items: center;
      }

      .tab_wrap {
        display: flex;
        color: #afb6bd;
        font-size: 20px;
        padding-top: 3px;
        gap: 55px;
        margin-left: 32px;

        div {
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 5px;

          &:hover {
            color: #b5a5ff;
          }
        }

        .tab_active {
          color: #b5a5ff;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: -5px;

            height: 3px;
            width: 100%;
            border-radius: 100px;
            background: linear-gradient(180deg, #5a6cff 0%, #7e1cff 100%);
          }
        }
      }

      .da_jiang_list {
        margin-top: 64px;
        width: 156px;
        height: 186px;
        background: linear-gradient(180deg, #0a0b22 0%, #000000 100%);
        border: 1px solid;
        border-image-source: linear-gradient(180deg, #181c25 0%, #000000 100%);
        border-radius: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 65px;

        .text1 {
          color: #ffffff;
          font-size: 16px;
          font-weight: 700;
          margin-bottom: 11px;
        }

        .text2 {
          color: #6a709d;
          font-size: 16px;
          font-weight: 500;
          margin-bottom: 20px;
        }

        .text3 {
          color: #f2c004;
          font-size: 16px;
          font-weight: 500;
        }
      }

      .reward_img {
        position: absolute;
        left: 50%;
        top: -30px;
        transform: translate(-50%, 0);

        width: 80px !important;
        height: 80px !important;
      }
    }
  }
}


:deep(.game_seach) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 0px;
  top: 20px;
  z-index: 1;
  // >b {
  //     display: flex;
  //     align-items: center;
  //     justify-content: center;

  // }

  span {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #8d81c1;

    >.left,
    .right {
      display: inline-block;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #282747;
      border-radius: 10px;
      border: solid 1.4px #282747;
      margin-left: 10px;
    }

    .left:hover,
    .right:hover {
      color: #fff;
      background: url('/img/home/sbtnBG.webp?t=@{timestamp}') no-repeat;
      background-size: cover;
    }
  }
}
</style>
